<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>免费在线图片压缩</title>
    <script src="http://cdn.bootcss.com/jszip/3.1.3/jszip.js"></script>
    <script src="http://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        body{font-size: 16px;padding: 40px 30px;}
        a{text-decoration: none;}
        /* 自定义按钮 */
        .m-btn{
            display: inline-block;
            padding: 7px 9px;
            font-size: 12px;
            cursor: pointer;
            user-select:none;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            -webkit-touch-callout:none;
            border-radius: 4px;
            color: #fff;
            background-color: #20a0ff;
            border-color: #20a0ff;
        }
        .m-btn:hover{
            background: #4db3ff;
            border-color: #4db3ff;
        }
        .m-btn:active{
            background: #1d90e6;
            border-color: #1d90e6;
        }

        /* 下拉框 */
        select{
            padding: 5px 9px;
            border-radius: 3px;
            border: 1px solid #bfcbd9;
            outline: none;

        }
        option{
            -webkit-appearance: none;
        }

        /* 压缩结果 */
        .zip_result>a{
            display: block;
            color: #333;
            margin-bottom: 20px;
        }
        .zip_result img{
            display: inline-block;
            vertical-align: middle;
            border-radius: 3px;
        }
        .zip_result .text-content{
            display: inline-block;
            vertical-align: middle;
        }
        .text-content .img-title{
            display: inline-block;
            font-size: 16px;
            font-weight: 500;
            margin-left: 15px;
        }
        .text-content .img-des{
            display: inline-block;
            font-size: 18px;
            margin-left: 20px;
            font-weight: 600;
            color: #20a0ff;
        }
    </style>
</head>
<body>
    <h3 style="text-align: center;font-size: 30px;">在线图片压缩</h3>
    <div style="margin: 20px;">
    <label for="zip_type">压缩比例</label>
    <select id="zip_type">
        <option value="0.9">0.9</option>
        <option value="0.8">0.8</option>
        <option value="0.7">0.7</option>
        <option value="0.6" selected>0.6</option>
        <option value="0.5">0.5</option>
        <option value="0.4">0.4</option>
        <option value="0.3">0.3</option>
    </select>
    <label class="m-btn" style="margin-left: 10px;">
        <input id="upload" type="file" accept="image/gif,image/jpeg,image/png,image/svg" multiple style="display: none;">
        点击上传
    </label>
    <a class="m-btn" id="download" style="display: none;">一键下载</a>
    </div>
    <div id="zip_result" class="zip_result">

    </div>
    <script>
        var eleFile = document.querySelector('#upload');

        var zip = new JSZip();
        var images = zip.folder('images');
        // 一键下载
        var $download = document.getElementById('download');

        eleFile.addEventListener('change', function (event) {
            var pei = document.getElementById('zip_type').value;
            // 选择的文件对象
            var files = event.target.files;
            for(var i = 0;i< files.length ; i++){
                zipImg(files[i],pei);
            }
            $download.style.display = 'inline-block';
        })

        /* 压缩图片 */
        function zipImg(file,pei) {
            // 压缩图片需要的一些元素和对象
            var reader = new FileReader(), Img = new Image();

            reader.readAsDataURL(file);

            reader.onload = function (e) {
                Img.src = e.target.result;
            }

            var ori_size = file.size;
            var cur_size = 0;
            var reduce_rate = 0;
            Img.onload = function () {
                // 缩放图片需要的canvas
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;

                // 最大尺寸限制
                var maxDrawWidth = 2000, maxDrawHeight = 2000;
                // 目标的绘制尺寸
                var drawWidth = originWidth, drawHeight = originHeight;

                if(originWidth > maxDrawWidth || originHeight > maxDrawHeight){
                    if(originWidth / originHeight > maxDrawWidth / maxDrawHeight){
                        // 如果图片更宽
                        drawWidth =  maxDrawWidth;
                        drawHeight = maxDrawWidth / originWidth * originHeight;
                    }else {
                        drawHeight = maxDrawHeight;
                        drawWidth = maxDrawHeight / originHeight * originWidth;
                    }
                }

                // canvas对图片进行缩放
                canvas.width = drawWidth;
                canvas.height = drawHeight;
                // 清除画布
                context.clearRect(0,0,drawWidth,drawHeight);
                // 图片压缩
                context.drawImage(Img, 0, 0, drawWidth, drawHeight);

                pei = pei <= 1 && pei >= 0 ? parseFloat(pei) : 1 ;
                // 添加到压缩文件
                canvas.toBlob(function (blob) {
                    images.file(file.name, blob);
                    cur_size = blob.size;
                    reduce_rate = Math.floor((cur_size - ori_size) / ori_size * 100) + '%';

                    var url = canvas.toDataURL(file.type);
                    var img = new Image();
                    var $a = document.createElement('a');
                    $a.setAttribute("href", url);
                    $a.setAttribute("download", file.name);

                    img.src = url;
                    // 最大尺寸限制
                    var maxWidth = 100, maxHeight = 100;
                    // 目标的展示尺寸
                    var displayWidth = 0, displayHeight = 0;

                    if(originWidth > maxWidth || originHeight > maxHeight){
                        if(originWidth / originHeight > maxWidth / maxHeight){
                            // 如果图片更宽
                            displayWidth =  maxWidth;
                            displayHeight = maxWidth / originWidth * originHeight;
                        }else {
                            displayHeight = maxHeight;
                            displayWidth = maxHeight / originHeight * originWidth;
                        }
                    }

                    img.width = displayWidth;
                    img.height = displayHeight;

                    $a.appendChild(img);

                    var $div = document.createElement('div');
                    $div.setAttribute('class','text-content')
                    var $h4 = document.createElement('h4');
                    $h4.setAttribute('class','img-title')
                    var $p = document.createElement('p');
                    $p.setAttribute('class','img-des')
                    $h4.textContent = file.name;
                    $p.textContent = reduce_rate;
                    $div.appendChild($h4).appendChild($p);
                    $a.appendChild($div);

                    document.getElementById('zip_result').appendChild($a);

                },file.type,pei);


            }
        }

        $download.onclick = function (e) {
            zip.generateAsync({
                type: "blob",
                compression: 'DEFLATE'
            }).then(function (content) {
                saveAs(content,'images.zip');
            })
        }

    </script>
</body>
</html>